<template>
  <div class="BedpadManagement">
    <el-row>
      <el-col style="display:flex;align-items: center;margin-bottom:10px;">
        <div class="border"></div>
        <h3>{{cameraManagement.bedTitle}}</h3>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="16">
      <div style="display:flex;align-items: center;margin-left:20px">
        <el-button
          class="addBtn boxShadowButton"
          icon="el-icon-circle-plus"
          style="margin-right:40px"
          @click="add"
        >{{cameraManagement.add}}</el-button>
        <p>{{cameraManagement.search}}</p>
        <el-input style="width:260px;margin-right:10px" v-model.trim="deviceNo" :placeholder="cameraManagement.deviceNo" @keyup.enter.native.prevent="check"></el-input>
        <el-button class="searchBtn boxShadowButton" @click="check">{{cameraManagement.check}}</el-button>
      </div>
      </el-col>
      <el-col align="right" :span="8">
         <el-button class="prevPage boxShadowButton" :disabled="pageNum==firstPage" @click="prevePage">{{$t('m.prevPage')}}</el-button>
           <el-button class="nextPage boxShadowButton"  :disabled="pageNum==lastPage" @click="nextPage">{{$t('m.nextPage')}}</el-button>
      </el-col>
    </el-row>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      style="width: 100%;margin-top:10px;margin-left:20px"
      :row-style="tableRowStyle"
      :header-cell-style="tableHeaderColor"
    >
      <el-table-column
        prop="deviceNo"
        :label="cameraManagement.sort"
        min-width="100"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column
        prop="deviceName"
        :label="cameraManagement.name"
        min-width="100"
        align="center"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="buildingName" :label="cameraManagement.build" min-width="100" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.buildingName=='' || scope.row.buildingName==undefined || scope.row.buildingName==null">--</span>
          <span v-else>{{scope.row.buildingName}}</span>
        </template>
      </el-table-column>
      <!-- 测试说要删掉 -->
      <!-- <el-table-column prop="floorNo" :label="cameraManagement.floor" min-width="100" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.floorNo=='' || scope.row.floorNo==undefined || scope.row.floorNo==null">--</span>
          <span v-else>{{scope.row.floorNo}}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="roomNo" :label="cameraManagement.roomNo" min-width="100" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.roomNo=='' || scope.row.roomNo==undefined || scope.row.roomNo==null">--</span>
          <span v-else>{{scope.row.roomNo}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="oldmanName" :label="cameraManagement.oldman" min-width="100" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.oldmanName=='' || scope.row.oldmanName==undefined || scope.row.oldmanName==null">--</span>
          <span v-else>{{scope.row.oldmanName}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="cameraManagement.status" min-width="100" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <span v-if="scope.row.status=='online'" style="color:green;cursor: pointer;" @click="equipmentstatus(scope.row)">{{cameraManagement.online}}</span>
          <span v-else style="color:red;cursor: pointer;" @click="equipmentstatus(scope.row)">{{cameraManagement.offline}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="cameraManagement.dosth" min-width="300" align="center">
        <template slot-scope="scope">
          <!-- <el-button
            class="fixBtn boxShadowButton"
            @click="fix(scope.row)"
            :size="size"
          >{{cameraManagement.fix}}</el-button> -->
           <el-button
            class="jiebangBtn boxShadowButton"
            @click="jiebang(scope.row)"
            v-if="scope.row.bind"
            :size="size"
          >{{cameraManagement.jiebang}}</el-button>
          <el-button
            class="detailBtn boxShadowButton"
             v-if="!scope.row.bind"
            @click="bangding(scope.row)"
            :size="size"
          >{{cameraManagement.bangding}}</el-button>
          <el-button
            class="deleteBtn boxShadowButton"
            @click="deleteClick(scope.row)"
            :size="size"
          >{{$t('m.delete')}}</el-button>
        </template>
      </el-table-column>
    </el-table>

     <el-dialog
      :title="cameraManagement.bangding"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closeBangding"
      class="deviceDialog"
    >
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="12" align="center">
             <el-tooltip class="item" effect="dark" :content="backList.deviceNo" placement="bottom">
              <el-form-item class="deviceDialog-contentOne" :label="cameraManagement.sort">{{backList.deviceNo}}</el-form-item>
            </el-tooltip>
          </el-col>
          <el-col :span="12">
            <el-form-item class="deviceDialog-contentTwo" :label="cameraManagement.build" prop="build">
              <el-select v-model="ruleForm.build" @change="changeBuild">
                <el-option
                  v-for="item in buildList"
                  :key="item.value"
                  :label="item.buildingName"
                  :value="item.buildingId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" align="center">
              <el-tooltip class="item" effect="dark" :content="backList.deviceName" placement="bottom">
              <el-form-item class="deviceDialog-contentOne" :label="cameraManagement.name">{{backList.deviceName}}</el-form-item>
            </el-tooltip>
          </el-col>
          <!-- 测试说要这么改 -->
          <!-- <el-col :span="12">
            <el-form-item class="deviceDialog-contentTwo" :label="cameraManagement.floor" prop="floor" ref="floor">
              <el-select v-model="ruleForm.floor" @change="changeFloor">
                <el-option
                  v-for="item in floorList"
                  :key="item.floorNo"
                  :label="item.floorNo"
                  :value="item.floorNo"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item class="deviceDialog-contentTwo" :label="cameraManagement.roomNo" prop="room" ref="room">
              <el-select v-model="ruleForm.room" @change="changeRoom">
                <el-option
                  v-for="item in roomList"
                  :key="item.value"
                  :label="item.roomNo"
                  :value="item.roomId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" align="center">
            <el-form-item class="deviceDialog-contentOne" :label="cameraManagement.oldman">{{oldName}}</el-form-item>
          </el-col>
          <!-- 测试说要这么改,为了页面的美观,移动到上面 -->
          <!-- <el-col :span="12">
            <el-form-item class="deviceDialog-contentTwo" :label="cameraManagement.roomNo" prop="room" ref="room">
              <el-select v-model="ruleForm.room" @change="changeRoom">
                <el-option
                  v-for="item in roomList"
                  :key="item.value"
                  :label="item.roomNo"
                  :value="item.roomId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button
            class="deleteBtn boxShadowButton"
            @click="bangdingForm('ruleForm')"
            :size="size"
          >{{cameraManagement.yes}}</el-button>
            <el-button class=" boxShadowButton" :size="size" @click="dialogVisible = false">{{cameraManagement.no}}</el-button>
      </div>
    </el-dialog>

     <!-- 解绑 -->
    <el-dialog
      :title="cameraManagement.jiebang"
      :visible.sync="jiebangDialogVisible"
      width="30%"
      :center="true"
      >
      <h3 style="text-align: center">{{cameraManagement.jiebangWordSleep}}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
            class="deleteBtn boxShadowButton"
            @click="jiebangCheck"
            :size="size"
          >{{cameraManagement.yes}}</el-button>
        <el-button class=" boxShadowButton" :size="size"  @click="jiebangDialogVisible = false">{{cameraManagement.no}}</el-button>
      </span>
    </el-dialog>


    <!-- 分页 -->
    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="total"
      style="margin-top:20px"
      align= "center"
      class="fenye"
       @current-change="changePage"
       :current-page='currentPage'>
    </el-pagination>

    <!-- 删除 -->
    <el-dialog
      :title="cameraManagement.deleteDevice"
      :visible.sync="deletDialogVisible"
      width="30%"
      :center="true"
      >
      <h3 style="text-align: center">{{cameraManagement.sureDelete}}</h3>
      <span slot="footer" class="dialog-footer">
        <el-button
            class="deleteBtn boxShadowButton"
            @click="delet"
            :size="size"
          >{{cameraManagement.yes}}</el-button>
        <el-button class=" boxShadowButton" :size="size"  @click="deletDialogVisible = false">{{cameraManagement.no}}</el-button>
      </span>
    </el-dialog>

    <!-- 设备离线状态弹窗 -->
    <el-dialog
      :title="equipmentStatus.status"
      :visible.sync="statusDialogVisible"
      width="40%"
      :center="true"
      @close='closeStatusDialogVisible'
      >
      <span>
        <el-table :data="statusList" :row-style="tableRowStyle" :header-cell-style="tableHeaderColor">
        <el-table-column type="index" :label="equipmentStatus.sort" width="100" align="center"></el-table-column>
        <el-table-column prop="deviceNo"  :label="equipmentStatus.name"  align="center"></el-table-column>
        <el-table-column prop="createdTime"  :label="equipmentStatus.updataTime"  align="center"></el-table-column>
        <el-table-column prop="online"  :label="equipmentStatus.online" align="center">
           <template slot-scope="scope">
            <span v-if="scope.row.online==1" style="color:green;">{{cameraManagement.online}}</span>
            <span v-else style="color:red" >{{cameraManagement.offline}}</span>
        </template>
        </el-table-column>
      </el-table>
      </span>
      <span>
         <!-- 分页 -->
    <el-pagination
      background
      layout="total,prev, pager, next,jumper"
      :total="listTotal"
      style="margin-top:20px"
      align= "center"
      class="fenye"
       @current-change="listChangePage"
       :current-page='listCurrentPage'>
    </el-pagination>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="statusDialogVisible = false">{{cameraManagement.check}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import bus from "../../../vuex/eventBus"; //引入eventBus,接收子界面传递的跳转指令,然后在父界面跳转,添加tab
export default {
  name: "CameraManagement",
  data() {
    return {
      cameraManagement: this.$t("m.cameraManagement"), //引入 lang 里面的字符串资源,
      equipmentStatus: this.$t("m.equipmentStatus"), //引入 lang 里面的字符串资源,
      size: "mini",
      dialogVisible: false,
      deletDialogVisible:false,
      jiebangDialogVisible:false,
      statusDialogVisible:false, //设备状态弹窗
      tableData: [],
      oldName:'', //老人姓名
      backList:{}, //回显的信息
      ruleForm:{
        build:'',
        floor:'',
        room:'',
      },
      buildList:[],
      buildingId:0,
      buildingName:'',
      floorList:[],
      floorNo:0,
      roomList:[],
      roomName:'',
      deviceId:0,
      roomId:0,
      tableLoading: false, //表格加载的loading
      deviceNo:'',
      total:0,
      pageNum:1,
      pageSize:10,
      currentPage:1,
      firstPage:'',//第一页
      lastPage:'',//最后一夜
      acceptLanguage:'ja_JP',//数据请求传参需要传的语言  ja_JP----日文
      statusList:[], //设备离线列表
      listTotal:0, //设备死活数
      listCurrentPage:1, //设备死活当前页面
      listPageNum:1,
      listdeviceId:'',
    };
  },
  computed:{
     rules() {
       return{
          build: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          },
          ],
          floor: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          },
          ],
          room: [
          {
            required: true,
            message: this.$t("m.equipmentAdd.null"),
            trigger: "change"
          },
          ],
       }
       
     }
  },
  methods: {
    add(row) {
      sessionStorage.setItem("deviceType","bed");
      bus.$emit('homePage',{type:'jump',path:'/equipmentAdd',title:this.$t("m.equipmentAdd").add});
    },

    //修改
     //修改按钮
    fix(row){
        console.log(row);
      let device_Info={
        deviceName:row.deviceName,
        deviceNo:row.deviceNo,
        id:row.id
      }
      sessionStorage.setItem("deviceType","bed");
      sessionStorage.setItem("deviceEdit","deviceEdit");
      sessionStorage.setItem("device_Info",JSON.stringify(device_Info));
      bus.$emit('homePage',{type:'jump',path:'/equipmentAdd',title:this.$t("m.equipmentAdd").edit});
    },

    //上一页
    prevePage(){
      this.pageNum= this.pageNum>this.firstPage ? this.pageNum-1 : this.firstPage;
      this.queryList()
    },

    //下一页
    nextPage(){
      this.pageNum= this.pageNum<this.lastPage ? this.pageNum+1 : this.lastPage;
      this.queryList()
    },

    //翻页
    changePage(val){
      this.pageNum = val
      this.queryList()
    },

     //确认搜索
    check(){
      this.pageNum = 1
      this.queryList()
    },

    //绑定
    bangding(row) {
      console.log(row)
      this.backList = row
      this.dialogVisible = true;
      this.roomList = [];
      this.getBuildList()
    },

    //查询列表
    queryList() {
      let param = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        deviceNo:this.deviceNo
      };

      this.tableLoading = true; //loading加载
      this.$postJson(
        "dmc/csunSleep/queryGroupCsunSleepListWithPage",
        param,
        this.acceptLanguage
      ).then(res => {
        this.tableData = res.result.list;
        this.total = Number(res.result.total)
        this.currentPage = res.result.pageNum;
        this.firstPage= res.result.firstPage//第一页
        this.lastPage= res.result.lastPage//最后一页
        setTimeout(() => {
          this.tableLoading = false;
        }, 1000);
      });
    },

    //获取楼栋列表
    getBuildList(){
      this.$postForm('omc/Building/showAll',{},this.acceptLanguage).then(res =>{
        this.buildList = res.result
      })
    },

    //选择楼栋
    changeBuild(val){
      this.floorList = [] //清空
      this.roomList =[]
      this.ruleForm.floor = '';
      this.ruleForm.room =''
      this.oldName = ''

      this.buildingId = val
      let buildList = this.buildList.filter(item =>{
        return item.buildingId == val
      })
      this.buildingName = buildList[0].buildingName
      //根据楼栋查楼层
      this.$postForm('omc/Building/selectById',{buildingId:val},this.acceptLanguage).then(res =>{
        for(var i=0;i<res.result.floorNum;i++){
          this.floorList.push({floorNo:i+1})
        }
      })
      this.changeFloor(1)
    },

    //选择楼层
    changeFloor(val){
      this.floorNo = val
      this.getRoom() //获取房间数据
    },

    //根据楼栋楼层获取房间信息
    getRoom(){
      this.roomList =[] //清空
      this.ruleForm.room =''
      this.oldName = ''

      let param = {
        buildingId:this.buildingId,
        floorNo:this.floorNo
      }
      this.$postJson('omc/Room/queryRoomInfo',param,this.acceptLanguage).then(res =>{
        this.roomList = res.result
      })
    },

    //选择房间
    changeRoom(val){
      this.roomId = val
       let roomList = this.roomList.filter(item =>{
        return item.roomId == val
      })
      console.log(roomList)
      this.roomName = roomList[0].roomNo
      //根据房间id查老人
      this.$postForm('omc/Room/theLifeRoom/'+val,{},this.acceptLanguage).then(res =>{
        this.oldName = res.result[0].oldName
      })
    },

    //绑定房间号
    bangdingForm(ruleForm){
         this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                  console.log(this.buildingName+'-'+this.floorNo+'-'+this.roomName)
                  let param = {
                    deviceId:this.backList.id,
                    bindType:4,
                    location:this.buildingName+'-'+this.floorNo+'-'+this.roomName,
                    roomId:this.roomId
                  }
                  this.$postJson('dmc/csunSleep/bindCsunSleep',param,this.acceptLanguage).then(res =>{
                      if(res.code ==200){
                        this.dialogVisible = false
                        this.queryList()
                        this.$message({message:res.message,type:'success'})
                      }else{
                        this.$message({message:res.message,type:'error'})
                      }
                  })
                }
         })
    },

    //解除绑定
  jiebang(row){
    this.deviceId = row.id
    this.jiebangDialogVisible = true
  },

  //确认解绑
  jiebangCheck(){
    this.$postForm('dmc/csunSleep/breakCsunSleep/'+this.deviceId,{},this.acceptLanguage).then(res =>{
      if(res.code ==200){
        this.jiebangDialogVisible = false;
        this.queryList()
      }
    })
  },

    //删除按钮
  deleteClick(row){
    this.deviceId = row.id
    if(row.bind == true){
      this.$message({message:this.$t("m.cameraManagement.deletBefore"),type:'error'})
    }else{
      this.deletDialogVisible = true
    }
  },

  //确认删除
  delet(){
    this.$postForm('dmc/csunSleep/deleteById/'+this.deviceId,{},this.acceptLanguage).then(res =>{
      if(res.code ==200){
        this.deletDialogVisible = false
        this.queryList();
        this.$message({ message: res.message, type: "success" });
      } else {
        this.$message({ message: res.message, type: "error" });
      }
    })
  },

    //关闭弹窗
    closeBangding(){
       this.$refs.ruleForm.resetFields()
      this.buildList = []
      this.floorList=[]
      this.roomList=[]
      this.oldName =''
    },

    //获取设备是否离线状态 by xiang 2020/3/6
    equipmentstatus(row){
      this.statusDialogVisible = true
      this.listdeviceId = row.id;
      let param ={
        pageNum:this.listPageNum,
        pageSize:this.pageSize,
        deviceId: this.listdeviceId,
        groupId: sessionStorage.getItem("groupId")
      }
      this.$postJson('dmc/online/queryListWithPage',param).then(res =>{
        this.listTotal =Number( res.result.total)
        this.statusList  = res.result.list
      })
    },

    //设备死活翻页 by xiang 
    listChangePage(val){
       this.listCurrentPage = val
        let param ={
        pageNum:val,
        pageSize:this.pageSize,
        deviceId: this.listdeviceId,
        groupId: sessionStorage.getItem("groupId")
      }
       this.$postJson('dmc/online/queryListWithPage',param).then(res =>{
        this.listTotal =Number( res.result.total)
        this.statusList  = res.result.list
      })
    },

    //关闭设备死活弹窗清空
    closeStatusDialogVisible(){
      this.listPageNum = 1
      this.listCurrentPage = 1
    },

    //

    /* 
      修改table tr行的背景色
    */
    tableRowStyle({ row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return "background-color: #efefef";
      } else {
        return "background-color: #f9f9f9";
      }
    },

    /* 
      修改table header的背景色
    */
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background-color:#ffffff;color:#000000;font-weight: 700;";
      }
    }
  },
  created() {},
  mounted() {
    this.queryList();
     bus.$on("refreshBedList",()=>{
      this.queryList();
    })
  },
   destroyed() {
    bus.$off("refreshBedList");
  }
};
</script>
<style lang="scss" scoped>
/deep/.el-select input {
    width: 150px;
    border: none !important;
    border-bottom: 2px solid #cccccc !important;
    border-radius: 1px;
  }
  .prevPage{
      background:#409efe;
      color:#ffffff;
    }
    .nextPage{
      background: #ffffff;
    }
.border {
  width: 10px;
  height: 30px;
  background: black;
  margin-right: 10px;
}
.addBtn {
  color: #7e7e7e;
}
.searchBtn {
  background: #409efe;
  color: #ffffff;
}
.jiebangBtn{
  background: #409EFF;
  color: #ffffff;
  border-radius: 5px;
}
.fixBtn{
   background: #E6A23C;
  color: #ffffff;
  border-radius: 5px;
}
.detailBtn {
  width: 128px;
  background: #67C23A;
  color: #ffffff;
  border-radius: 5px;
}
.deleteBtn {
  background: #dddddd;
  color: #010101;
  border-radius: 5px;
}

/deep/ .deviceDialog .el-form-item {
  margin-bottom: 20px !important;
}
/deep/ .deviceDialog .el-form-item__label{
  line-height: 20px !important;
}
/deep/ .deviceDialog-contentOne .el-form-item__content{
  height:35px !important;
  line-height: 40px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/deep/ .deviceDialog-contentTwo .el-form-item__content{
  height:35px !important;
  line-height: 30px !important;

}
/deep/ .deviceDialog .el-input__inner{
  height:20px !important;
  line-height: 20px !important;
}
/deep/ .deviceDialog .el-input__icon{
  height:120% !important;
}
/deep/ .deviceDialog .el-input{
  width:150px !important;
}
</style>